<template>
	<view>
		<view class="cu-modal" :class="modalShow?'show':''" @tap="modalHide()" v-if="shopPictures.length != 0 && shopPictures[0].length != 0">
			<view class="cu-dialog index-pic">
<!-- 				<view class="pop-img"  v-if="shopPictures[0] == undefined || shopPictures[0] == ''">
					<image src="../../static/images/index-pic.jpg" mode="aspectFill"></image>
				</view> -->
				<view class="pop-img" v-for="(item,index) in shopPictures" :key="index">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 轮播图，选中店铺信息 -->
		<view class="top">
			<!-- 轮播图 -->
			<view>
				<swiper :current="current" class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
				 duration="500" v-if="swiperList[0].url == '' || swiperList[0].url == undefined || swiperList[0].url == ''">
					 <swiper-item >
						<image src="../../static/images/banner.png" mode="aspectFill" ></image>
					 </swiper-item>
				</swiper>
				<swiper :current="current" class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
				 duration="500"  v-else>
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill" ></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 店铺选择展示栏 -->
			<view>
				<view class="margin-top index-flex-row">
					<view class="shop-info" @tap="showModal" data-target="bottomModal">
						<view class="index-flex-row flex-item-center">
							<view class="shop-name over-line-1">
								<text class="zitijiacu">{{currentShop.shopName}}</text>
							</view>
							<view class="arrow-right">
								<text class="cuIcon-right"></text>
							</view>
						</view>
						<view class="shop-addr over-line-1">
							<text class="xiaoziti">{{currentShop.address}}</text>
						</view>
					</view>
					<view class="phone" @tap="call(currentShop.tel)">
						<image src="../../static/images/dianhua.png" mode=""></image>
					</view>
				</view>
				<!-- 店铺弹出模态框 -->
				<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog  bg-white" @tap.stop="">
						<view class="cu-bar">
							<view class="action qhmd">选择切换门店</view>
							<view class="action cuIcon-roundclosefill qxmd" @tap="hideModal"></view>
						</view>
						<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0" class="shops-modal">
							<view class="index-flex-row flex-item-center xuanze" v-for="(item,shop_index) in shopList" :key="shop_index">
								<view class="shop-info">
									<view class="index-flex-row flex-item-center">
										<view class="shop-name over-line-1">
											<text class="zitijiacu">{{item.shopName}}</text>
										</view>
									</view>
									<view class="shop-addr over-line-1">
										<text class="xiaoziti">{{item.address}}</text>
									</view>
								</view>
								<view class="flex-item-center" @tap="shopChange(item.id)" :data-shop_index="shop_index">
									<image style="width: 44rpx; height: 44rpx;" src="../../static/images/honggou.png" v-if="currentShopIndex === item.id"></image>
									<image style="width: 44rpx; height: 44rpx;" src="../../static/images/huiyuanquan.png" v-else></image>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<!--显示技师列表-->
			<view v-if="employeeList.length > 0">
				<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0">
					<view class="technician-list" v-for="(item,tec_index) in employeeList" :key="tec_index">
						<view class="technician-info">
							<image class="technician-avatar" :src="item.image" mode="aspectFill"></image>
							<view class="technician-info-text">
								<text class="technician-name over-line-1">{{item.name}}</text>

								<view class="technician-expand">
									<view class="technician-num-box over-line-1">
										<text class="technician-num">{{item.empType}}</text>
									</view>
									<view class="technician-num-box margin-l over-line-1">
										<text class="technician-appointment-num" v-if="item.orderNum == null">已约:0</text>
										<text class="technician-appointment-num" v-else>已约:{{item.orderNum}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="technician-appointment" @tap="toReservation(item.id)">
							<text>预约</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 当前店铺无技师 显示缺省页 -->
			<view v-else class="no-list">
				<image class="technician-avatar1" src="../../static/images/no_one.png"></image>
				<text>亲，该店铺暂无员工哦</text>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/common/request.js"
	import {getShopList,findByShopId} from '@/api/index.js';
	var _self = null;
	export default {
		data() {
			return {
				longitude:null,//纬度
				latitude:null,//经度
				shopList:[],//店铺列表
				currentShopIndex:null,//店铺列表选中id
				currentShop:{},//当前选中店铺
				employeeList:[],//员工列表
				modalName: null,
				swiperList: [],
				shopIndex:null,
				shopPictures:[],//弹窗图片
				modalShow:true,
				headTitle:null,
			}
		},
		onShow() {
			this.goLocation();//获取用户经纬度
		},
		onLoad() {
			_self = this;
			_self.currentShopIndex = uni.getStorageSync('shopID');//记录商家ID
			// 初始化towerSwiper 传已有的数组名即可
			// _self.getShopInfo();
			// uni.setTabBarItem({
			// 	index: 1,
			// 	"pagePath": "pages/me/business_manage/card",
			// 	text: '会员卡管理',
			// 	"iconPath": "static/images/huiyunaka.png",
			// 	"selectedIconPath": "static/images/huiyunaka1.png"
			// })
		},
		methods: {
			//隐藏弹窗
			modalHide(){
				this.modalShow = false
			},
			//根据店铺id获取员工列表
			findByShopId(){
				let _that = this
				findByShopId(_self.currentShopIndex).then(re =>{
					_that.employeeList = re
				}).catch(re=>{
					console.log(re);
				});
			},
			//获取用户经纬度
			goLocation(){
				uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_self.longitude=res.longitude;
					_self.latitude=res.latitude;

					_self.getShopListInfo();
					},fail(e) {
						console.log(e);
					}
				});
			},
			//获取店铺列表
			getShopListInfo(){
				let _that = this
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				getShopList(_that.longitude,_that.latitude).then(re =>{
					_that.shopList=re;
					console.log(_that.currentShopIndex)
					if(_that.currentShopIndex == null || _that.currentShopIndex == undefined || _that.currentShopIndex == ''){
						_that.currentShop = _that.shopList[0]
						_that.currentShopIndex = _that.shopList[0].id
						_that.employeeList = _that.currentShop.employees
						var pages = getCurrentPages();
						pages.forEach(function(va){
							if(va.route == "pages/index/index"){
								_that.headTitle = _that.currentShop.shopName
								uni.setNavigationBarTitle({
								　　title:_that.headTitle
								})
							}
						})
						_that.swiperList = []
						if(_that.currentShop.shopBanner != undefined){
							_that.swiperList = _that.currentShop.shopBanner.replace(/\"/g, "").replace("\[","").replace("\]","").split(',')
							_that.TowerSwiper("swiperList");
						}
						_that.shopPictures = []
						if(_that.currentShop.shopPictures != undefined){
							_that.shopPictures = _that.currentShop.shopPictures.replace(/\"/g, "").replace("\[","").replace("\]","").split(',')
						}
						uni.setStorageSync('shopID',_that.currentShopIndex);//记录商家ID
					}
					_that.shopList.map((v,i)=>{
						if(v.id == _that.currentShopIndex){
							_that.currentShop = _that.shopList[i]
							var pages = getCurrentPages();
							pages.forEach(function(va){
								if(va.route == "pages/index/index"){
									_that.headTitle = _that.currentShop.shopName
									uni.setNavigationBarTitle({
									　　title:_that.headTitle
									})
								}
							})
							_that.swiperList = []
							if(_that.currentShop.shopBanner != undefined ){
								_that.swiperList = _that.currentShop.shopBanner.replace(/\"/g, "").replace("\[","").replace("\]","").split(',')
								_that.TowerSwiper("swiperList");
							}
							_that.shopPictures = []
							if(_that.currentShop.shopPictures != undefined){
								_that.shopPictures = _that.currentShop.shopPictures.replace(/\"/g, "").replace("\[","").replace("\]","").split(',')
							}
							_that.findByShopId()
						}
					})
					uni.hideLoading();
					uni.setStorageSync('shoplist',re)
					// uni.hideToast();
				}).catch(re=>{
					console.log(re);
				});
			},
			//检查登录是否过期
			// checkLogin: function() {
			// 	var _this = this;
			// 	uni.checkSession({
			// 		success: function(res) {
			// 			// _this.registered();
			// 			// _this.getUserInfo(e);
			// 			uni.switchTab({
			// 				url: "index/index"
			// 			});
			// 		},
			// 		fail: function(e) {
			// 			uni.navigateTo({
			// 				url:"../login"
			// 			})
			// 		}
			// 	})
			// },
			// getShopInfo:function(){
			// 	request.post('/app/shop/getShopByUserId', {}).then(res => {
			// 		if(res.code==-444){
			// 			uni.navigateTo({
			// 				url:"../login"
			// 			})
			// 			return false;
			// 		}
			// 		if (res.code == 200) {
			// 			// 获取商铺信息
			// 			console.log(res);
			// 		}
			// 	})
			// },
			shopChange(e) {
				this.currentShopIndex = e;
				this.modalShow = true
				this.getShopListInfo();
				uni.setNavigationBarTitle({
				　　title:this.headTitle
				})
				uni.setStorageSync('shopID',this.currentShopIndex);//记录商家ID
				this.findByShopId()
				_self.hideModal();
			},
			/* 拨打商家电话 */
			call(tel) {
				// var tel = _self.currentShop.shopTel;
				if (tel) {
					uni.makePhoneCall({
						phoneNumber: tel
					});
				} else {
					uni.showToast({
						icon: "none",
						title: "该商家没有电话"
					});
				}
			},
			// 底部模态框
			showModal(e) {
				// _self.currentShopIndex = uni.getStorageSync('shopID');//记录商家ID
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal() {
				this.modalName = null
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let that = this
				let list =[]
				list = that.swiperList.map(item => {
				       return {
				         name: item,
				         url: item
				       }
				});
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
			toReservation(id){
				uni.navigateTo({
					url: 'reservation/reservation?id='+id
				});
			}

		}
	}
</script>

<style>
	@import "../../static/css/index.css";
</style>
